<template>
       <!-- <pullRefresh @refresh="refresh"> -->
   <!-- <div> -->
       <!-- <Navbar :title="'客户详情'" rightText='更多筛选'></Navbar> -->
        <!-- <van-button type="primary" /> -->
 
       <!-- <div class="content-box">
           <div class="tiem-box">
                          		<el-row :gutter="15">
                <el-col :lg="5"  >
                    <div class="picker-box">
                <span class="picker-text">时间范围：</span>
	   <el-date-picker
        v-model="form.startTime"
        type="date"
        placeholder="开始时间"
        format="YYYY-MM-DD"
         value-format="YYYY-MM-DD"
		 @change="comparison"
      /> 
      <span class="picker-text1">-</span>
	   <el-date-picker
        v-model="form.endTime"
        type="date"
        placeholder="开始时间"
		        format="YYYY-MM-DD"
         value-format="YYYY-MM-DD"
		 @change="comparison"
      />
                    </div>
					   </el-col>
            </el-row>
           </div>
            <div class="card-box">
                     <card :data="item" v-for="(item,index) in listCard" :key="index"></card>
            </div>
            <labelName :title="'战略品种（金额）'"></labelName>
            <chartCard :echartsData="echartsStrategic" height="30rem"></chartCard>
             <labelName :title="'TOP10客户'"></labelName>

       </div>
            <TOP10Table :tableData="TOPData"></TOP10Table>

    </div> -->
           <!-- </pullRefresh>    -->
               <el-header class="header">
      <Condition   @search="gosearch"></Condition>
    </el-header>
    <el-main>
                <labelName :title="'指标'"></labelName>
             <div class="card-box">
                     <card :data="item" v-for="(item,index) in listCard" :key="index"></card>
            </div>
              <div v-auth="['overview-money']">
                            <labelName :title="'战略品种（金额）'"></labelName>
            <chartCard :echartsData="echartsStrategic" height="30rem"></chartCard>
              </div>
              <div v-auth="['overview-TOP']">
             <labelName :title="'TOP10客户'"></labelName>
            <TOP10Table :tableData="TOPData"></TOP10Table>
              </div>
    </el-main>
</template>

<script>
// import Navbar from '../components/Navbar.vue'
import card from '../components/card.vue'
import labelName from '../components/labelname.vue'
import chartCard from '../components/chartcard.vue'
import TOP10Table from '../components/TOP10Table.vue'
import Condition from '../components/condition.vue'
import img1 from '@/assets/img/countIcon.png'
import img2 from '@/assets/img/upicon.png'

export default {
  components:{
   //   Navbar,
     card,
     labelName,
     chartCard,
     TOP10Table,
     Condition
   //   pullRefresh
  },
  data(){
     return{
        form:{
           startTime:"",
           endTime:''
        },
        listCard:[1,2,3,4,5,6],
        rules:{},
        // TOP10
        TOPData:[],
              // 战略品种（金额）
      echartsStrategic:{
                color: ["#FCA169", "#7488FF", "#FF596F", "#D770ED"],
                  tooltip: {
                  trigger: 'item',
                        formatter: function(data){
                          console.log(data)
                              let    str = `<div style=" width: 100%; display: flex; align-items: center;"><div style='background:${data.color}; width: 0.8rem;height: 0.8rem;border-radius: 50rem; margin-right:0.4rem'>
                                           </div><span style="font-size:1.25rem;color:${data.color}"> ${data.name}</span></div><div style="font-size:1.08rem;margin-top:0.4rem">金额：${data.value}万</div>
                                           <div style="font-size:1.08rem;margin-top:0.4rem; display: flex; align-items: center;justify-content: space-between;"><span>同比</span>  <img style="width: 1rem;height: 0.5rem;" src='${data.data.type==0?img1:img2}'></img> <span>${data.data.yearOnYear}</soan> </div>`
                             return str
                        },  
                   },
                     legend: {
    left: 0,
    top: 20,
    // bottom: 20,
    data: []
    },
               series: [
                     {
                    name: '战略品种（金额）',
                    type: 'pie',
                    top:'center',
                    left:'center',
                    radius: ['0%' ,'120%'],
                    label:{
                        normal:{
                        position: 'inside',
                        formatter:'{name|{d}%}',
                        rich:{
                            name:{
                            fontSize: 14,
                            align:'left',
                            color: '#fff',
                            }
                        }
                        }
                      },
                    center: ['50%', '50%'],
                    data: [
                        // {value: 335, name: '直接访问',product:123,label:{textStyle:{
                        //   color:'#FCA169'
                        // }}},
                        // {value: 310, name: '邮件营销',product:123,label:{textStyle:{
                        //   color:'#7488FF'
                        // }}},
                        // {value: 234, name: '联盟广告',product:123,label:{textStyle:{
                        //   color:'#FF596F'
                        // }}},
                        // {value: 135, name: '视频广告',product:123,label:{textStyle:{
                        //   color:'#D770ED'
                        // }}},
                    ],
                    product:[1,2,3,4],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                        }
                    }
                }
            ]
        }

     }
  },
  created(){
     this.getData()
  },
  mounted(){
   
  },
  methods:{
       fontSize(res){
	const clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
	if (!clientWidth) return;
	let fontSize = clientWidth / 1920;
	return res*fontSize;
     	},
        refresh(){

        },
        		comparison(){
			console.log(this.form)
            if(this.form.startTime!==''&&this.form.endTime!==''){
          var start = new Date(this.form.startTime).getTime();; //时间对象
		  var end = new Date(this.form.endTime).getTime(); //时间对象
		  console.log(this.form.startTime,this.form.endTime,end,start)
                    if(end<start){
                        this.$alert( '结束时间不能早于开始时间', "提示", {type: 'error'})
					          	this.form.endTime = ''
				           	}else{
                       this.getData()
                     }
			}
		},
    gosearch(data){
      this.form.startTime = data.startTime
      this.form.endTime = data.endTime
      this.getData()
    },
     getData(){
       let data =  this.$API.clientM.customer.overviewList.post(this.form)
       data.then(res=>{
         if(res.code =='0'){
            console.log(res)
            // card
            if(res.data.yearOnYears.length>0){
              this.listCard = res.data.yearOnYears
              this.listCard.push(res.data.yearOnYears[4])
              this.listCard.push(res.data.yearOnYears[4])
            }
            // 金额图
            if(res.data.strategicVarietySituations.length>0){
               let arr = []
               let arr1 = []
               res.data.strategicVarietySituations.forEach((item,index)=>{
                     let objdata = {
                       name:item.name,
                       value:item.quantity,
                       type:item.type,
                       label:{
                          textStyle:{
                          color: this.echartsStrategic.color[index]
                        }
                       },
                       yearOnYear:item.yearOnYear
                     }
                     arr1.push(item.name)
                     arr.push(objdata)
               })
                this.echartsStrategic.series[0].data = arr 
                 this.echartsStrategic.legend.data = arr 
            }
            // table
            if(res.data.customers.length>0){
                    this.TOPData = res.data.customers
            }


         }
       })
     }
  }
}
</script>

<style scoped>
.el-main{
  padding: 5px !important;
}
.header{
    width: 100%;
    min-height:72px;
    display: flex;
}
.top{
    margin-top: 1.6rem;
}
.el-header{
--el-header-height:none;
}
.card-box{
    width:calc(100% - 1rem);
   display: grid;
   min-height: 12.2rem;
   padding: 0.5rem;
   margin: auto;
   grid-template-columns: repeat(3,1fr);
   column-gap:0.8rem ;
}

</style>